<template>
	<view class="play">
		<!-- 1.0 封面图片 -->
		<view class="photo" :style="`background-image:url(${picUrl})`">
			<image class="img" :src="picUrl" mode="widthFix"></image>
		</view>

		<!-- 2.0 歌曲信息 -->
		<view class="info">
			<view class="name">
			  <view>{{name}}</view>
			  <view v-if="d" class="time">{{d}} / <text class="time2">{{c}}</text> </view>
			</view>
			<view class="lyric">
				<!-- ul承载所有的歌词信息 -->
				<view class="ul" :style="`transform: translateY(-${current * 44}px)`">
					<view v-for="(obj, i) in lyricArray" :class="['li',{active: i == current}]">
						{{obj.text}}
					</view>
				</view>
			</view>
		</view>



		<!-- 3.0 按钮 -->
		<view class="footer">
			<view class="box">
				<view class="left">
					<button class="btn" @click="prevFn">
						<!-- 上一首 -->
						<image src="../../static/icon-prev.png" mode="widthFix" class="icon"></image>
					</button>
				</view>
				<view class="center">
					<!-- {{isPlay?"点击暂停":"点击播放"}} -->
					<button class="btn" @click="playFn">
						<image v-if="isPlay" src="../../static/icon-pause.png" mode="widthFix" class="icon"></image>
						<image v-else src="../../static/icon-play.png" mode="widthFix" class="icon"></image>
					</button>
				</view>
				<view class="right">
					<button class="btn" @click="nextFn">
						<!-- 下一首 -->
						<image src="../../static/icon-next.png" mode="widthFix" class="icon"></image>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入读取歌词的方法
	import {
		getLyric,
		address
	} from '../../api/index.js';

	// 定义变量记录音频上下文对象
	let innerAudioContext = null;


	// 编写一个格式化时间的方法
	const formatime = (seconds) => {
		let h = 0,
			m = 0,
			s = 0;
		h = Math.floor(seconds / 3600)
		m = Math.floor((seconds % 3600) / 60)
		s = Math.floor(seconds % 60)

		h = h < 10 ? '0' + h : h;
		m = m < 10 ? '0' + m : m;
		s = s < 10 ? '0' + s : s;

		return `${h}:${m}:${s}`
	}

	export default {
		data() {
			return {
				// 当前歌曲的id
				id: "",
				// 布尔值控制音乐播放/暂停
				isPlay: false,
				// 数组 记录每一行歌词信息(歌词时间，文本)
				lyricArray: [],
				num: 0, //当前播放的歌词
				picUrl: "", // 渲染歌曲封面
				name: "", // 渲染歌曲名称
				duration: 0, // 音频总时长
				currentTime: 0, // 音频当前播放的位置
				current: 0, // 歌词的位置的索引值
				songs: [], //获取歌曲列表
				key: 0, //当前播放的歌曲是几首歌
				d: '',
				c: ''
			}
		},
		onLoad(option) {
			// 获取歌曲列表
			this.getSongs();
			// 接收页面传递的URL参数
			if (option.id) {
				// 这个id用于获取歌曲信息
				this.id = option.id;
				// 调用处理歌词的方法
				this.getLyricText(this.id);
				// 调用方法渲染封面
				this.getImgUrl(this.id);
				//直接播放音频
				// this.playFn();
				// 获取歌曲的索引
				this.getKeyValue(this.id);
			}

			if (option.name) {
				// 接收URL的name属性值
				this.name = option.name;
			}


		},

		// 当用户返回上一级页面，执行的回调函数
		onBackPress() {
			// console.log("back 111")
			// 停止播放
			this.pause();
		},


		methods: {
			// 获取歌曲列表
			getSongs() {
				// 判断当前环境是否支持本地存储
				if (uni.getStorageSync) {
					let str = uni.getStorageSync("SONGS");
					if (str) {
						// console.log(str);
						let songs = JSON.parse(str);
						// console.log(songs);
						this.songs = songs;
					}
				}
			},
			// 获取当前播放的是第几首歌曲
			getKeyValue(id) {
				let v = 0;
				// 循环歌曲数组
				for (let i = 0; i < this.songs.length; i++) {
					if (this.songs[i].id == id) {
						v = i;
						break;
					}
				}
				this.key = v;
				// console.log({v});
			},
			// 点击“上一首”按钮
			prevFn() {
				let v = this.key;
				v--;
				if (v < 0) {
					uni.showToast({
						title: "没有上一首歌了~",
						icon: "none"
					})
					v = 0;
				}
				// 赋值给id 
				this.id = this.songs[v].id;
				// 更换封面图
				this.getImgUrl(this.id);
				// 更换歌词
				this.getLyricText(this.id);
				//直接播放音频
				// this.play(this.id);
				// this.isPlay = true;

				this.name = this.songs[v].name;
				// 赋值给Key
				this.key = v;

			},
			// 点击“下一首”按钮
			nextFn() {
				let v = this.key;
				v++;
				if (v > this.songs.length - 1) {
					uni.showToast({
						title: "没有上一首歌了~",
						icon: "none"
					})
					v = this.songs.length - 1;
				}
				// 赋值给id 
				this.id = this.songs[v].id;
				// 更换封面图
				this.getImgUrl(this.id);
				// 更换歌词
				this.getLyricText(this.id);
				//直接播放音频
				// this.play(this.id);
				// this.isPlay = true;
				this.name = this.songs[v].name;
				// 赋值给Key
				this.key = v;
			},

			// 音频进入可以播放状态，但不保证后面可以流畅播放
			onCanplay() {
				if (innerAudioContext) {
					innerAudioContext.onCanplay(() => {
						// 获取音频文件的长度（总时长）
						let duration = innerAudioContext.duration;
						console.log("总时长:", duration)
						this.duration = duration;
						this.d = formatime(duration)
						console.log(this.d)
					})
				}
			},

			// 音频播放进度更新事件
			onTimeUpdate() {
				if (innerAudioContext) {
					innerAudioContext.onTimeUpdate(() => {
						// 获取音频文件的长度（总时长）
						let currentTime = innerAudioContext.currentTime;
						console.log("当前播放的位置:", currentTime)
						this.currentTime = currentTime;
						this.c = formatime(currentTime)
						// 定义变量记录位置
						let v = 0;
						// 循环歌词数组
						for (let i = 0; i < this.lyricArray.length - 1; i++) {
							// 当前播放的歌词  this.lyricArray[i]
							// 下一行歌词 this.lyricArray[i + 1]
							if (currentTime >= this.lyricArray[i].time && currentTime <= this.lyricArray[i + 1]
								.time) {
								v = i;
								// 跳出循环
								break;
							}
						}
						// 循环结束
						this.current = v;
					})
				}
			},


			// 拼接歌曲封面路径
			getImgUrl(id) {
				this.picUrl = `${address}/music/img/${id}.jpg`;
			},

			//编写方法 控制按钮文本
			playFn() {
				this.isPlay = !this.isPlay;
				//播放
				if (this.isPlay) {
					this.play(this.id);
				}
				// 暂停
				else {
					this.pause();
				}
			},
			// 编写播放音频的方法
			play(id = 1) {
				// 播放音频之前，重置一下音频上下文对象
				this.pause();
				// 过去采用audio组件播放音频，现在使用api的方式播放音频
				innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.loop = true;
				innerAudioContext.src = `${address}/music/audio/${id}.mp3`;
				
				innerAudioContext.onPlay(() => {
					console.log('播放');
				});
				innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				
				// console.log(innerAudioContext.src)
				this.onCanplay();
				this.onTimeUpdate();
			},

			// 编写暂停音频的方法
			pause() {
				if (innerAudioContext) {
					try {
						innerAudioContext.pause();
						innerAudioContext.destroy()
						innerAudioContext = null;
						console.log('暂停');
					} catch (e) {
						//TODO handle the exception
					}
				}
			},

			// 获取歌词
			async getLyricText(id = 1) {
				await getLyric(`/music/lyric/${id}.txt`)
					.then(
						content => {
							// console.log(content)
							// 处理歌词
							this.parseLyric(content);
						}
					)
					.catch(err => console.log(err))
			},
			// 处理歌词，把歌词文本转成数组
			parseLyric(text) {
				if (text) {
					let arr = text.split("\n");
					// 把数组中最后一个数据删除删除
					arr.pop();
					// console.log(arr)
					// 定义新数组
					let newArr = [];
					// 循环arr数组
					for (let i = 0; i < arr.length; i++) {
						// arr[i] 代表每一行歌词
						if (/\[(\d{2}):(\d{2}).(\d{1,3})\](.{0,})/.test(arr[i])) {
							let result = /\[(\d{2}):(\d{2}).(\d{1,3})\](.{0,})/.exec(arr[i]);
							let m = result[1] - 0;
							let s = result[2] - 0;
							let ms = result[3] - 0;
							let obj = {}
							// 计算每一行歌词的时间
							obj.time = m * 60 + s + (ms / 1000);
							// 歌词文本
							obj.text = result[4];
							// 添加每一行歌词
							newArr.push(obj);
						}
					}
					// 赋值给lyricArray
					this.lyricArray = newArr;
				}
			},
		}
	}
</script>

<style>
	.footer {
		width: 100%;
		position: fixed;
		bottom: 0px;
		left: 0px;
		z-index: 1000;
		padding: 0px 15px;
		box-sizing: border-box;
		background-color: #fff;
	}

	.footer .box {
		width: 100%;
		height: 80px;
		display: flex;
		justify-content: space-between;
	}

	.footer .box .btn {
		background-color: transparent;
	}

	.footer .box .btn::after {
		border: 0px;
	}

	.footer .box .btn .icon {
		width: 30px;
	}


	.info {
		padding: 10px 15px;
		text-align: center;

	}

	.info .name {
		font-size: 18px;
		padding: 10px 0;
		font-weight: bold;
	}
	.info .name .time {
		font-weight: normal;
		margin-top: 5px;
		color: #ccc;
	}
	.info .name .time .time2 {
		color: #666;
	}

	.info .lyric {
		/* background-color: red; */
		width: 100%;
		height: 160px;
		/* 溢出部分隐藏 */
		overflow: scroll;
		padding-top: 50px;
	}

	/* 移除滚动条 */
	::-webkit-scrollbar {
		display: none;
	}

	.info .lyric .ul {
		width: 100%;
		/* 位移属性 */
		transform: translateY(-0px);
		/* 过渡属性 */
		transition: all .2s;
		/* 设置外边距 */
		margin-top: 30px;
	}

	.info .lyric .ul .li {
		padding: 10px 0px;
		transition: all .25s;
	}

	.info .lyric .ul .li.active {
		color: #7FCD91;
		font-size: 22px;
	}



	.play {
		padding: 10px 15px;
	}

	.photo {
		width: 180px;
		height: 180px;
		margin: 0 auto;
		border: 30px solid rgba(255, 255, 255, .7);
		background-size: cover;
		background-origin: border-box;
		border-radius: 10px;
		overflow: hidden;
		border-radius: 50%;
	}

	.photo .img {
		width: 100%;
		vertical-align: middle;
	}
</style>